<template>
  <div class="wrapper">
    <catalog></catalog>
    <example>
      <template v-slot:title>
        基本用法
      </template>
      <l-table :table="table1"></l-table>
      <template v-slot:code>
        {{example1}}
      </template>
    </example>

    <example>
      <template v-slot:title>
        带checkbox的表格
      </template>
      <l-table :table="table2"></l-table>
      <template v-slot:code>
        {{example2}}
      </template>
    </example>

    <example>
      <template v-slot:title>
        带操作按钮的表格
      </template>
      <l-table :table="table3">
      </l-table>
      <template v-slot:code>
        {{tableExample.example3}}
      </template>
    </example>

    <example>
      <template v-slot:title>
        自定义列模版的表格
      </template>
      <p style="white-space: pre-wrap">{{table4}}</p>
      <l-button @click="addRow">添加</l-button>
      <l-table :table="table4">
      </l-table>
      <template v-slot:code>
        {{tableExample.example4}}
      </template>
    </example>

    <example>
      <template v-slot:title>
        改变表格数据
      </template>
      <l-button @click="changeTableData" style="margin-bottom: 5px;">改变数据</l-button>
      <l-table :table="table5">
      </l-table>
      <template v-slot:code>
        {{tableExample.example5}}
      </template>
    </example>

    <example>
      <template v-slot:title>
        不带分页的表格
      </template>
      <l-table :table="table6">
      </l-table>
      <template v-slot:code>
        {{tableExample.example6}}
      </template>
    </example>

    <example>
      <template v-slot:title>
        异步请求数据
      </template>
      <l-button @click="refresh">click me</l-button>
      <l-table :table="table7">
      </l-table>
      <template v-slot:code>
        {{tableExample.example7}}
      </template>
    </example>

  </div>
</template>

<script>
import PsUI from '../../../src';
import Catalog from '../components/Catalog';
import Example from '../components/Example';
import TableExample from './Table-Example';
import axios from 'axios';

export default {
  name: 'Table',
  components: {
    Catalog,
    Example
  },
  data () {
    return {
      tableExample: TableExample,
      example1: TableExample.example1,
      example2: TableExample.example2,
      table7: new PsUI.Table({
        initToExecuteAjax: false,
        ajax (page) {
          return axios.post('api/rest/post/alertQueryFlexService/getAlertByPage', [{
            severities: '1,2,3,4',
            states: '0,5,10,20,30',
            domain: '/0/515445641576227/'
          }, {
            start: (page.page.pageNumber - 1) * page.page.pageSize,
            length: page.page.pageSize,
            statCount: true
          }]).then(response => {
            let {data} = response;
            if (data.code === 0 || data.code === '0') {
              return data.data;
            } else {
              return data;
            }
          });
        },
        realPage: true,
        columns: [{
          key: 'alertId',
          label: '报警编号'
        }, {
          key: 'severity',
          label: '报警级别'
        }, {
          key: 'firstArisingTime',
          label: '首次报警时间',
          type: 'dateTime'
        }, {
          key: 'count',
          label: '报警次数'
        }, {
          key: 'arisingTime',
          label: '最近报警时间',
          type: 'dateTime'
        }, {
          key: 'instanceName',
          label: '报警位置'
        }, {
          key: 'appName',
          label: '报警来源'
        }, {
          key: 'message',
          label: '报警描述',
          edit: true
        }, {
          key: 'state',
          label: '报警状态'
        }]
      }),
      table6: new PsUI.Table({
        columns: [{
          label: '用户名',
          key: 'username'
        }, {
          label: '姓名',
          key: 'name'
        }, {
          label: '年龄',
          key: 'age'
        }, {
          label: '电话',
          key: 'phone'
        }],
        data: [{
          username: '1030006',
          name: 'David',
          age: 40,
          phone: '13800000000'
        }, {
          username: '1030004',
          name: 'Amy',
          age: 33,
          phone: '13800000000'
        }, {
          username: '1030004',
          name: 'Tom',
          age: 33,
          phone: '13800000000'
        }, {
          username: '2330004',
          name: 'Jack',
          age: 23,
          phone: '13800000000'
        }],
        showPage: false
      }),
      table5: new PsUI.Table({
        columns: [{
          label: '用户名',
          key: 'username'
        }, {
          label: '姓名',
          key: 'name'
        }, {
          label: '年龄',
          key: 'age'
        }, {
          label: '电话',
          key: 'phone'
        }],
        data: [{
          username: '1030006',
          name: 'David',
          age: 40,
          phone: '13800000000'
        }, {
          username: '1030004',
          name: 'Amy',
          age: 33,
          phone: '13800000000'
        }, {
          username: '1030004',
          name: 'Tom',
          age: 33,
          phone: '13800000000'
        }, {
          username: '2330004',
          name: 'Jack',
          age: 23,
          phone: '13800000000'
        }]
      }),
      table4: new PsUI.Table({
        inlineEdit: true,
        buttons: [{
          label: '按钮1',
          click () {
            alert('点击了按钮1');
          }
        }],
        columns: [{
          label: '用户名',
          key: 'username',
          edit: true,
          add: true
        }, {
          label: '姓名',
          key: 'name',
          edit: true,
          add: true
        }, {
          label: '年龄',
          key: 'age',
          edit: true,
          add: true
        }, {
          label: '电话',
          key: 'values.phone',
          edit: true,
          add: true
        }],
        data: [{
          username: '1030006',
          name: 'David',
          age: 40,
          values: {
            phone: '13800000000'
          }
        }, {
          username: '1030004',
          name: 'Amy',
          age: 33,
          values: {
            phone: '13800000000'
          }
        }, {
          username: '1030004',
          name: 'Tom',
          age: 33,
          values: {
            phone: '13800000000'
          }
        }, {
          username: '2330004',
          name: 'Jack',
          age: 23,
          values: {
            phone: '13800000000'
          }
        }]
      }),
      table3: new PsUI.Table({
        columns: [{
          label: '用户名',
          key: 'username'
        }, {
          label: '姓名',
          key: 'name'
        }, {
          label: '年龄',
          key: 'age'
        }, {
          label: '电话',
          key: 'phone'
        }],
        data: [{
          username: '1030006',
          name: 'David',
          age: 40,
          phone: '13800000000'
        }, {
          username: '1030004',
          name: 'Amy',
          age: 33,
          phone: '13800000000'
        }, {
          username: '1030004',
          name: 'Tom',
          age: 33,
          phone: '13800000000'
        }, {
          username: '2330004',
          name: 'Jack',
          age: 23,
          phone: '13800000000'
        }],
        buttons: [{
          label: '按钮1',
          click () {
            alert('点击了按钮1');
          }
        }, {
          label: '按钮2',
          color: 'red',
          click (row) {
            alert('当前行数据是\n' + JSON.stringify(row));
          }
        }, {
          label: '按钮3',
          color: 'purple',
          outline: true,
          click (row, table) {
            alert('当前表格选中的数据是\n' + JSON.stringify(table.getSelected()));
          }
        }],
        showSelect: true
      }),
      table2: new PsUI.Table({
        columns: [{
          label: '用户名',
          key: 'username'
        }, {
          label: '姓名',
          key: 'name'
        }, {
          label: '年龄',
          key: 'age'
        }, {
          label: '电话',
          key: 'phone'
        }],
        data: [{
          username: '1030006',
          name: 'David',
          age: 40,
          phone: '13800000000'
        }, {
          username: '1030004',
          name: 'Amy',
          age: 33,
          phone: '13800000000'
        }, {
          username: '1030004',
          name: 'Tom',
          age: 33,
          phone: '13800000000'
        }, {
          username: '2330004',
          name: 'Jack',
          age: 23,
          phone: '13800000000'
        }],
        showSelect: true
      }),
      table1: new PsUI.Table({
        columns: [{
          label: '用户名',
          key: 'username'
        }, {
          label: '姓名',
          key: 'name'
        }, {
          label: '年龄',
          key: 'age'
        }, {
          label: '电话',
          key: 'phone'
        }],
        data: [{
          username: '1030006',
          name: 'David',
          age: 40,
          phone: '13800000000'
        }, {
          username: '1030004',
          name: 'Amy',
          age: 33,
          phone: '13800000000'
        }, {
          username: '1030004',
          name: 'Tom',
          age: 33,
          phone: '13800000000'
        }, {
          username: '2330004',
          name: 'Jack',
          age: 23,
          phone: '13800000000'
        }]
      })
    };
  },
  methods: {
    refresh () {
      this.table7.refresh();
    },
    addRow () {
      this.table4.beginInlineAdd();
    },
    changeTableData () {
      this.table5.setData([{
        username: '11111',
        name: '科比 布莱恩特',
        age: 40,
        phone: '13800000000'
      }, {
        username: '22222',
        name: '勒布朗 詹姆斯',
        age: 33,
        phone: '13800000000'
      }]);
    }
  }
};
</script>
